<template>
    <el-dialog :title="isEdit?'编辑拆箱理货':'新增拆箱理货'" :visible.sync="dialogForm" width="1200px">
        <el-form :inline="true" :model="form" ref="form" class="search-form" :rules="rules" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号：" prop="containerId">
                        <el-input placeholder="请输入箱号" v-model="form.containerId">
                            <el-button slot="append" icon="el-icon-search" @click="handleSelectBox"></el-button>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="箱型：" prop="containerType">
                        <auto-search-entrust v-model="form.containerType"
                                             :name="form.containerType"></auto-search-entrust>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="尺寸：" prop="containerSize">
                        <auto-search-size v-model="form.containerSize" :name="form.containerSize"></auto-search-size>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船代：" prop="shipAgentName">
                        <auto-search-custom @selectName="v=>form.shipAgentName=v" @select="v=>form.shipAgentId=v"
                                            :name="form.shipAgentName"
                                            :isShipAgent="true"></auto-search-custom>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="铅封号：">
                        <el-input v-model="form.sealNo"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="内外贸：" prop="tradeType">
                        <el-select v-model="form.tradeType" placeholder="请选择" clearable>
                            <el-option v-for="[key, val] in _dictTradeType" :key="key" :label="val" :value="key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="船名：">
                        <auto-search-ship @selectName="v=>form.shipName=v" :name="form.shipName"
                                          ship="shipCName"></auto-search-ship>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="航次：">
                        <el-input v-model="form.voyage"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业港口：" prop="portCode">
                        <select-port v-model="form.portCode" :name="form.portCode"></select-port>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label=" ">
                        <el-checkbox v-model="form.isDamaged">货 损</el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row v-if="form.isDamaged">
                <el-col :span="24">
                    <el-form-item label="货损描述：" prop="damagedExplan">
                        <el-input type="textarea" :maxLength="120" :rows="3" placeholder="请输入内容"
                                  v-model="form.damagedExplan"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="拆箱备注：" prop="remark">
                        <el-input type="textarea" :maxLength="120" :rows="3" placeholder="请输入内容"
                                  v-model="form.remark"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="拆箱总件数：">
                        {{ form.cargoCount }}
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="拆箱总货重：">
                        {{ form.cargoWeight }}
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label="拆箱照片：">
                        <attachments v-model="form.attachments" listType="picture-card"></attachments>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-table :data="table" border stripe max-height="500" class="mt-10">
            <el-table-column type="index" fixed="left" label="序号" width="55" ></el-table-column>
            <el-table-column prop="cargoName" label="货名"  min-width="120">
                <template slot-scope="scope">
                    <auto-history-cargo-name @selectName="v=>scope.row.cargoName=v"
                                             :name="scope.row.cargoName"></auto-history-cargo-name>
                </template>
            </el-table-column>
            <el-table-column prop="packing" label="包装"  min-width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.packing"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="cargoCount" label="拆箱件数"  min-width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.cargoCount" @change="v=>changeCount(v,scope.$index)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="cargoWeight" label="拆箱货重"  min-width="120">
                <template slot-scope="scope">
                    <el-input v-model="scope.row.cargoWeight" @change="v=>changeWeight(v,scope.$index)"></el-input>
                </template>
            </el-table-column>
            <el-table-column prop="isFinish" label="装箱完成"  min-width="110">
                <template slot-scope="scope">
                    <el-checkbox v-model="scope.row.isFinish" :disabled="scope.$index!==table.length-1">完成</el-checkbox>
                </template>
            </el-table-column>
            <el-table-column prop="tallyClerk" label="理货人"  min-width="120">
                <template slot-scope="scope">
                    <!--<el-input v-model="scope.row.tallyClerk"></el-input>-->
                    <auto-search-resource searchType="JOB_ZYRY" searchName="resourceName" :name="scope.row.tallyClerk"
                                          :tall="true"
                                          @selectId="v=>scope.row.tallyClerkId=v"
                                          @selectName="v=>scope.row.tallyClerk=v"></auto-search-resource>
                </template>
            </el-table-column>
            <el-table-column prop="tallyTime" label="理货时间"  min-width="200">
                <template slot-scope="scope">
                    <el-date-picker v-model="scope.row.tallyTime"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    type="datetime" placeholder="选择理货时间">
                    </el-date-picker>
                </template>
            </el-table-column>
            <el-table-column fixed="right" align="center" label="操作"  width="140">
                <template slot-scope="scope">
                    <el-button size="small" v-if="scope.$index===table.length-1" type="text"
                               @click="handleAdd(scope.$index)">新 增
                    </el-button>
                    <el-button type="text" v-if="table.length>1" class="danger" size="small"
                               @click="handleRemove(scope.$index)">删 除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogForm = false">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="$store.getters.loadingBtn">保 存</el-button>
        </div>
        <select-box v-if="selectBox" ref="selectBox" @select="handleBox"></select-box>
    </el-dialog>
</template>

<script>
    import autoSearchEntrust from '@/components/autocomplete/autoSearchEntrust'
    import autoSearchSize from '@/components/autocomplete/autoSearchSize'
    import autoSearchCustom from '@/components/autocomplete/autoSearchCustom'
    import autoSearchContainer from '@/components/autocomplete/autoSearchContainerId'
    import attachments from '@/components/file-upload'
    import autoSearchShip from '@/components/autocomplete/autoSearchShip'
    import selectPort from '@/components/select/selectPort'
    import autoHistoryCargoName from '@/components/autocomplete/autoHistoryCargoName'

    import { addPlanList, editPlanList } from '@/api/planList/planList'
    import { REG_ALL_NUMBER, REG_NUMBER } from "@/utils/Reg";
    import autoSearchResource from '@/components/autocomplete/autoSearchResource'
    import selectBox from './components/selectBox'

    export default {
        name: "planListForm",
        components: {
            autoSearchEntrust,
            autoSearchSize,
            autoSearchCustom,
            attachments,
            autoSearchContainer,
            autoSearchShip,
            autoSearchResource,
            selectPort,
            autoHistoryCargoName,
            selectBox
        },
        data() {
            return {
                isEdit: false,
                dialogForm: false,
                selectBox: false,
                form: this.clearForm(),
                table: [this.clearTable()],
                rules: {
                    containerId: [{ required: true, message: '请选择箱号', trigger: 'change' }],
                    containerSize: [{ required: true, message: '请选择尺寸', trigger: 'change' }],
                    containerType: [{ required: true, message: '请选择类型', trigger: 'change' }],
                    shipAgentName: [{ required: true, message: '请选择船代', trigger: 'change' }],
                    tradeType: [{ required: true, message: '请选择内外贸', trigger: 'change' }],
                    portCode: [{ required: true, message: '请选择作业港口', trigger: 'change' }],
                }
            }
        },
        mounted() {
            console.log(this.$route)
        },
        methods: {
            clearForm() {
                return {
                    containerId: "",
                    containerSize: "",
                    containerType: "",
                    tradeType: "",
                    sealNo: "",
                    portCode: "",
                    shipAgentName: "",
                    shipAgentId: "",
                    remark: "",
                    enchaseWay: "GZ",
                    cargoWeight: 0,
                    cargoCount: 0,
                    imOrEx: "EX",
                    attachments: [],
                }
            },
            clearTable() {
                return {
                    cargoName: "",
                    packing: "",
                    cargoCount: "",
                    cargoWeight: "",
                    isFinish: false,
                    tallyClerk: "",
                    tallyTime: ""
                }
            },
            handleSubmit() {
                for (let i = 0; i < this.table.length; i++) {
                    const el = this.table[i]
                    if (!el.cargoName) {
                        this.$message({ message: '请输入货名!', type: 'error' })
                        return
                    }
                    if (!el.packing) {
                        this.$message({ message: '请输入包装!', type: 'error' })
                        return
                    }
                    if (el.cargoCount === '') {
                        this.$message({ message: '请输入拆箱件数!', type: 'error' })
                        return
                    }
                    // if (el.cargoWeight === '') {
                    //     this.$message({ message: '请输入装箱货重!', type: 'error' })
                    //     return
                    // }
                    if (!el.tallyClerk) {
                        this.$message({ message: '请输入理货人!', type: 'error' })
                        return
                    }
                    if (!el.tallyTime) {
                        this.$message({ message: '请输入理货时间!', type: 'error' })
                        return
                    }
                }
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        let data = {
                            ...this.form,
                            records: this.table,
                            planType: 'CX'
                        }
                        this.isEdit ? this.handleToEdit(data) : this.handleToAdd(data)
                    } else {
                        this.$message({ message: '请检查表单!', type: 'error' })
                    }
                })
            },
            handleToEdit(data) {
                editPlanList(data.planId, data).then(res => {
                    this.$message({ message: '编辑成功!', type: 'success' })
                    this.dialogForm = false
                })
            },
            handleToAdd(data) {
                addPlanList(data).then(res => {
                    this.$message({ message: '新增成功!', type: 'success' })
                    this.dialogForm = false
                })
            },
            handleAdd(index) {
                this.table[index].isFinish = false
                this.table.push(this.clearTable())
            },
            handleRemove(index) {
                this.table.splice(index, 1)
            },
            changeCount(val, index) {
                if (!REG_NUMBER.test(val)) {
                    this.table[index].cargoCount = 0
                }
            },
            changeWeight(val, index) {
                if (!REG_ALL_NUMBER.test(val)) {
                    this.table[index].cargoWeight = 0
                }
            },
            handleSelectBox() {
                this.selectBox = true
                this.$nextTick(() => {
                    this.$refs.selectBox.dialogForm = true
                    this.$refs.selectBox.loadData()
                })
            },
            handleBox(item){
                console.log(item)
                this.form={ ...this.form, ...item }
            }
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    this.$parent.dialogForm = false
                }
            },
            count(val) {
                this.form.cargoCount = val
            },
            weight(val) {
                this.form.cargoWeight = val
            }
        },
        computed: {
            isFinish() {
                return this.table.length > 0 && this.table[this.table.length - 1].isFinish
            },
            // 总件数
            count() {
                let count = 0
                this.table.forEach(item => {
                    if (Number(item.cargoCount) >= 0) {
                        count = count + Number(item.cargoCount)
                    }
                })
                return count
            },
            // 总货重
            weight() {
                let weight = 0
                this.table.forEach(item => {
                    if (Number(item.cargoWeight) >= 0) {
                        weight = weight + Number(item.cargoWeight)
                    }
                })
                return weight
            },
        },
    }
</script>

<style scoped>

</style>
